<div class="form_content">
  <div class="environment_variables_section popup_form">
    <% template_row_id_prefix = scope[:collection_name].to_s + (scope[:secure] ? "_secure" : "") %>
    <div id="<%= template_row_id_prefix %>">
      <table class="<%= scope[:collection_name] -%> variables">
        <thead>
        <tr>
          <th>Name</th>
          <th></th>
          <th>Value</th>
          <th></th>
        </tr>
        </thead>
        <tbody class="<%= scope[:collection_name] -%>">
        <% scope[:collection].each do |variable| -%>
          <%= scope[:form].fields_for scope[:collection_name], variable, :index => "" do |var_form| %>
            <tr class="environment-variable-edit-row">
              <td class="name_value_cell">
                <%= var_form.text_field :name, :class => "form_input environment_variable_name", :id => nil -%>
                <%= error_message_on(variable, com.thoughtworks.go.config.EnvironmentVariableConfig::NAME, :css_class => "name_value_error") %>
                <%= hidden_field_tag "#{scope[:form].object_name}[#{scope[:collection_name]}][][original_name]", variable.getName() %>
              </td>
              <td class="name_value_cell">
                <span class="equals_sign">=</span>
              </td>
              <td class="name_value_cell">
                <div>
                  <% if scope[:secure] %>
                    <div class="password_field">
                      <%= var_form.password_field :valueForDisplay, :class => "form_input environment_variable_value", :id => nil, :readonly => 'readonly' -%>
                      <button type="button" id="password_display_toggle" class="hide_password hidden"></button>
                      <%= hidden_field_tag("#{scope[:form].object_name}[variables][][originalValue]", variable.getValueForDisplay(), :class => "original-secure-variable-value") -%>
                      <%= hidden_field_tag "#{scope[:form].object_name}[#{scope[:collection_name]}][][secure]", true %>
                      <%= hidden_field_tag "#{scope[:form].object_name}[#{scope[:collection_name]}][][#{com.thoughtworks.go.config.EnvironmentVariableConfig::ISCHANGED}]", false, :class => "is-changed-field" %>
                    </div>
                  <% else %>
                    <%= var_form.text_field :valueForDisplay, :class => "form_input environment_variable_value", :id => nil -%>
                  <% end %>

                  <%= error_message_on(variable, com.thoughtworks.go.config.EnvironmentVariableConfig::VALUE, :css_class => "name_value_error") %>
                </div>
              </td>
              <% if scope[:secure] && !scope[:read_only_page] %>
                <td class="name_value_cell cell_edit_reset_actions">
                  <%= link_to 'Edit', '#', :class => "edit skip_dirty_stop" -%>
                  <%= link_to 'Reset', '#', :class => "reset hidden skip_dirty_stop" -%>
                </td>
              <% end %>
              <% unless scope[:read_only_page] %>
                <td class="name_value_cell icon_remove_cell">
                  <span class="icon_remove delete_parent"></span>
                </td>
              <% end %>
            </tr>
          <%- end -%>
        <%- end -%>
        </tbody>
      </table>
      <% unless scope[:read_only_page] %>
        <%= action_icon({:type => "add", :text => 'Add', :href => "#", :class => "skip_dirty_stop add_item", :id => 'add_variables'}) %>
      <%end %>
      <table style="display: none;">
        <tbody class="template">
        <tr class="environment-variable-edit-row">
          <%= scope[:form].fields_for scope[:collection_name], :index => "" do |var_form| %>
            <td class="name_value_cell">
              <%= var_form.text_field :name, :class => "form_input environment_variable_name", :id => nil -%>
            </td>
            <td class="name_value_cell">
              <span class="equals_sign">=</span>
            </td>
            <td class="name_value_cell">
              <div>
                <% if scope[:secure] %>
                  <div class="password_field">
                    <%= var_form.password_field :valueForDisplay, :class => "form_input environment_variable_value", :id => nil, :autocomplete => 'off' -%>
                    <button type="button" id="password_display_toggle" class="hide_password"></button>
                    <%= hidden_field_tag "#{scope[:form].object_name}[#{scope[:collection_name]}][][secure]", true %>
                    <%= hidden_field_tag "#{scope[:form].object_name}[#{scope[:collection_name]}][][#{com.thoughtworks.go.config.EnvironmentVariableConfig::ISCHANGED}]", true, class: 'is-changed-field' %>
                  </div>
                <% else %>
                  <%= var_form.text_field :valueForDisplay, :class => "form_input environment_variable_value", :id => nil -%>
                <% end %>
              </div>
            </td>
            <% unless scope[:read_only_page] %>
              <td class="name_value_cell">
                <span class="icon_remove delete_parent"></span>
              </td>
            <%end %>
          <% end %>
        </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>

<script type="text/javascript">
  (function ($) {
    $(function () {
      EnvironmentVariableEdit({
        tableRowSelector:      '.environment-variable-edit-row',
        passwordFieldSelector: '.environment_variable_value'
      });
      EnvironmentVariableAddRemove($('#<%=template_row_id_prefix-%>'), {
        onAdd:    function (addButton) {
          addButton.parents('form.dirtyform').data('dirty', true);
        },
        onRemove: function (deleteLink) {
          deleteLink.parents('form.dirtyform').data('dirty', true);
        }
      });
    });
  })(jQuery);
</script>
